<template>
	<view class="info">
		<view class="info-left">	
			<slot name="logo"></slot>
			<text class="info-text" v-if="leftTitle.length < 2">{{ leftTitle[0] }}</text>
			<view class="info-text two" v-if="leftTitle.length === 2">
				<text class="top">{{ leftTitle[0] }}</text>
				<text class="bottom">{{ leftTitle[1] }}</text>
			</view>
		</view>
		<view class="info-right" @click="handle">
			<text 
				class="info-number"
				v-if="rightTitle !== ''"
				:style="{ fontSize: rightFontSize + 'rpx', color: rightFontColor }"
			>{{ rightTitle }}</text>
			<view class="info-arrow" :class="{ active: open && iconName !== 'arrow-right' }" v-if="showArrow">
				<u-icon :name="iconName" :size="arrowSize" :color="arrowColor"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			leftTitle: {
				default () {
					return []
				},
				type: Array,
			},
			rightTitle: {
				default: '',
				type: [String, Number]
			},
			rightFontSize: {
				default: 28,
				type: Number
			},
			rightFontColor: {
				default: '#333333',
				type: String
			},
			arrowColor: {
				default: '#333333',
				type: String
			},
			showArrow: {
				default: true,
				type: Boolean,
			},
			arrowSize: {
				default: 28,
				type: Number
			},
			open: {
				default: false,
				type: Boolean
			},
			iconName: {
				default: 'arrow-right',
				type: String
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			handle (e) {
				this.$emit('handle')
			}
		}
	}
</script>

<style lang="scss" scoped>
.info {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: PingFang SC;
	font-weight: 500;
	&-left, &-right {
		display: flex;
		align-items: center;
	}
	&-text {
		font-size: 30rpx;
		color: #333333;
		margin-left: 20rpx;
		
		&.two {
			display: flex;
			flex-direction: column;
			justify-content: center;
			.top {
				font-size: 30rpx;
				color: #333333;
			}
			.bottom {
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
	&-number {
		font-size: 36rpx;
		color: #EB5B01;
		margin-right: 20rpx;
		line-height: 0;
	}
	&-arrow {
		display: flex;
		transition: transform .5s;
		&.active {
			transform: rotate(180deg);
		}
	}
}
</style>
